<template>
  <div class="agency_details">
    <div class="container-fluid">
      <headers :userInfo="false"></headers>
      <div class="details-box row">
        <div class="col-xs-12">
          <h3>代理商详情：</h3>
          <div class="row">
            <div class="col-xs-4">代理商ID：{{ agency_details.id }}</div>
            <div class="col-xs-4">代理商帐号：{{ agency_details.userTel }}</div>
            <div class="col-xs-4">代理商名称：{{ agency_details.agencyName }}</div>
          </div>
          <div class="row">
            <div class="col-xs-4">当前钻石库存：{{ agency_details.stockBrick }}</div>
            <div class="col-xs-4">本月钻石销量：{{ agency_details.thisMonthSellBrick }}</div>
            <div class="col-xs-4">总销量：{{ agency_details.brickSellTotal }}</div>
          </div>
          <div class="row">
            <div class="col-xs-4">当前金币库存：{{ agency_details.stockGold }}</div>
            <div class="col-xs-4">本月金币销量：{{ agency_details.thisMonthSellGold }}</div>
            <div class="col-xs-4">总销量：{{ agency_details.goldSellTotal }}</div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              加入代理时间：{{ agency_details.agencyTime | filterTime }}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              备注：{{ agency_details.desc }}
            </div>
          </div>
        </div>
      </div>
      <div class="row" style="margin-top: 0.6rem;">
        <div class="col-xs-4"><button class="btn" @click="editAgency()" >编辑代理商</button></div>
        <div class="col-xs-4"><button class="btn" @click="cancelAgency(true)">取消代理商</button></div>
        <div class="col-xs-4"><button class="btn" @click="cancelAgency(false)">删除代理商</button></div>
      </div>


    </div>
    <!-- edit layer -->
    <div class="layer-box " id="editBox">
      <form>
        <div class="row" style="margin: 0;">
          <div class="col-xs-12" style="padding: 0 30px;margin-top: 15px;">
            <div class="form-group">
              <label for="">代理商账号</label>
              <input type="text" class="form-control" placeholder="代理商账号">
            </div>
            <div class="form-group">
              <label for="">代理商名称</label>
              <input type="text" class="form-control" placeholder="代理商名称">
            </div>
            <div class="form-group">
              <label for="">备注</label>
              <input type="text" class="form-control" placeholder="备注">
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
  import Headers from '../../components/Header.vue';
  import {mapActions,mapGetters} from 'vuex';
  import {formatDate} from '../../commonJs/formatDate';
  export default {
    data(){
      return {
        headerTitle:'代理详情',
        returnStatus:true,
        agency_details:''
      }
    },
    components:{Headers},
    computed:{
      ...mapGetters([
        'headerStatus'
      ])
    },
    mounted(){
      let _this = this;
      this.$nextTick(function () {
        _this.headers();

        let objHtml = $("#editBox");
        $('body').append(objHtml);

        _this.agency_details = _this.$store.state.agencyDetails_data;

      })
    },
    methods:{
      headers(){
        this.headerStatus.headerTitle = this.headerTitle;
        this.headerStatus.returnStatus = this.returnStatus;
      },
      editAgency(){
        layer.open({
          type: 1,
          title:['编辑代理商','text-align:center;padding:0;'],
          area:'80%',
          skin: 'layui-layer-demo', //样式类名
          closeBtn: 0, //不显示关闭按钮
          btn:['确认','取消'],
          anim: 2,
          shadeClose: true, //开启遮罩关闭
          content: $('#editBox'),
          yes: function(){
            console.log('yes1');
          }

        })
      },
      cancelAgency(type){
        let text = '是否要删除该代理商？';
        if(type){
          text = '是否要取消该代理商？';
        }
        layer.alert(text,{
          btn:['确认','取消'],
          closeBtn:0,
          shadeClose:true
        },function(){
          console.log('yes2');
        });
      }
    },
    filters:{
      filterTime(time){
        let date = new Date(time*1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    }

  }
</script>
<style scoped lang="less">
  @import '../../style/main';
  .agency_details{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    z-index: 100;
    background: #fff;
  }

</style>
